<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta content="telephone=no" name="format-detection" />
    <title>Document</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/style.css">

    <script src="js/jquery-1.11.3.min.js"></script>
    <script src="js/html5.js"></script>
    <script src="js/placeholder.js"></script>
    <!--[if IE]>
<script>
    (function(){if(!/*@cc_on!@*/0)return;var e = "abbr,article,aside,audio,bb,canvas,datagrid,datalist,details,dialog,eventsource,figure,footer,header,hgroup,main,mark,menu,meter,nav,output,progress,section,time,video".split(','),i=e.length;while(i--){document.createElement(e[i])}})()
</script>
<![endif]-->
    <!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/html5.css">
<![endif]-->
    <!--[if lt IE 9]>
    <script src="js/css3-mediaqueries.js"></script>
<![endif]-->
    <script>
        var browser = navigator.appName
        var b_version = navigator.appVersion
        var version = b_version.split(";");
        var trim_Version = version[1].replace(/[ ]/g, "");
        if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") { alert("Your browser version is too low, and some features may not be displayed! Please upgrade your browser or use another browser!"); }
        else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") { alert("Your browser version is too low, and some features may not be displayed! Please upgrade your browser or use another browser!"); }
    </script>
</head>

<body>
    <div class="content-box">
        <div class="content-top">
            <div class="fl">
                <a href=""><img src="./images/logo.PNG" /></a>
            </div>
            <img class="menu-btn" src="./images/menu-logo.PNG" />
            <div class="fr">
                <img class="top-home" src="./images/top-home.PNG" />
                <div class="top-news">
                    <img src="./images/top-news.PNG" />
                    <span></span>
                </div>
                <div class="top-account">
                    <img src="./images/top-account.png" />
                    <span class="name">UserName</span>
                    <img src="./images/icon_dropdown.png" />
                    <ul>
                        <li><a>修改密码</a></li>
                        <li><a>角色管理</a></li>
                        <li><a>管理员管理</a></li>
                    </ul>
                </div>
                <img class="top-btn" src="./images/top-btn.PNG" />
            </div>
        </div>
        <div class="content-menu">
            <ul class="menu-list">
                <li class="item1 active">
                    <a>首页</a>
                </li>
                <li class="item2">
                    <a>订单</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item3">
                    <a>产品</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item4">
                    <a>会员</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item5">
                    <a>促销</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item6">
                    <a>数据</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item7">
                    <a>博客</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item8">
                    <a>店铺</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
                <li class="item9">
                    <a>设置</a>
                    <ul class="menu2">
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                        <li><a>menu2</a></li>
                    </ul>
                </li>
            </ul>
        </div>
        <div class="content-right">
            <div class="order-box order-details">
                <p class="title1">订单详情</p>
                <div class="fl">
                    <div class="liucheng">
                        <p class="liucheng-img"><img src="./images/liucheng2.png" /></p>
                        <ul>
                            <li>
                                <p>等待支付</p>
                                <p>2019-12-23 12:12:12</p>
                            </li>
                            <li>
                                <p>等待发货</p>
                                <p>2019-12-23 12:12:12</p>
                            </li>
                            <li>
                                <p>已发货</p>
                                <p>2019-12-23 12:12:12</p>
                            </li>
                            <li>
                                <p>已完成</p>
                                <p>2019-12-23 12:12:12</p>
                            </li>
                            <li>
                                <p>已取消</p>
                                <p>2019-12-23 12:12:12</p>
                            </li>
                        </ul>
                    </div>
                    <div class="or-detail">
                        <p class="title2">订单详情</p>
                        <p class="top">
                            <sapn>No.#12132423432434</sapn>&nbsp;&nbsp;
                            <sapn>创建于2019-12-12 12:12:21</sapn>
                            <span>订单状态：等待确认支付</span>
                            <span class="change-status">修改状态</span>
                            <button class="btn-blue">已收款，等待发货</button>
                        </p>
                        <div class="info">
                            <ul>
                                <li><span>用户：</span><span>232442@qq.com</span></li>
                                <li><span>账号级别：</span><span>232442@qq.com</span></li>
                                <li><span>购买情况：</span><span>232442@qq.com</span></li>
                                <li><span>IP：</span><span>232442@qq.com</span></li>
                            </ul>
                            <ul>
                                <li><span>付款方式：</span><span>fsfsszvsffe</span></li>
                                <li><span>付款账号：</span><span>sfsgegewgwe</span></li>
                                <li><span>付款金额：</span><span>fssggsdgsg</span></li>
                                <li><span>下单时间：</span><span>2019-12-12 12:12:21</span></li>
                                <li><span>付款时间：</span><span>2019-12-12 12:12:21</span></li>
                            </ul>
                            <ul>
                                <li><span>订单总额：</span><span class="price-num">$189.32</span class="price-num"><span class="edit-price">修改</span></li>
                                <li><span>产品总价：</span><span>$180.00</span></li>
                                <li><span>运费：</span><span>$171.84</span></li>
                                <li><span>保险费：</span><span>$0.99</span></li>
                                <li><span>折扣：</span><span>-$0.08</span></li>
                                <li><span>会员折扣：</span><span>-94%</span></li>
                                <li><span>手续费：</span><span>$223</span></li>
                            </ul>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="pro-details">
                        <p class="title2">产品详情 <span>修改</span></p>
                        <table class="table" border="0" cellpadding="0" cellspacing="0">
                            <thead>
                                <tr>
                                    <th width="14%">序号</th>
                                    <th width="30%">产品</th>
                                    <th width="14%">价格</th>
                                    <th width="14%">数量</th>
                                    <th width="14%">小计</th>
                                    <th width="14%">备注</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <div class="pro-info">
                                            <p class="img"><img src="./images/pro.png" /></p>
                                            <div class="info">
                                                <p>产品名称产品名称产品名称产品名称产品名称</p>
                                                <p>编号:T09444</p>
                                                <p>SKU(出厂编码):996577</p>
                                                <p>Type:ssss</p>
                                                <p>ScreenSize:121212</p>
                                                <p>Color:red</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>$23224</td>
                                    <td>23224</td>
                                    <td>$23224</td>
                                    <td>备注</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <div class="pro-info">
                                            <p class="img"><img src="./images/pro.png" /></p>
                                            <div class="info">
                                                <p>产品名称产品名称产品名称产品名称产品名称</p>
                                                <p>编号:T09444</p>
                                                <p>SKU(出厂编码):996577</p>
                                                <p>Type:ssss</p>
                                                <p>ScreenSize:121212</p>
                                                <p>Color:red</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>$23224</td>
                                    <td>23224</td>
                                    <td>$23224</td>
                                    <td>备注</td>
                                </tr>
                                <tr>
                                    <td>1</td>
                                    <td>
                                        <div class="pro-info">
                                            <p class="img"><img src="./images/pro.png" /></p>
                                            <div class="info">
                                                <p>产品名称产品名称产品名称产品名称产品名称</p>
                                                <p>编号:T09444</p>
                                                <p>SKU(出厂编码):996577</p>
                                                <p>Type:ssss</p>
                                                <p>ScreenSize:121212</p>
                                                <p>Color:red</p>
                                            </div>
                                        </div>
                                    </td>
                                    <td>$23224</td>
                                    <td>23224</td>
                                    <td>$23224</td>
                                    <td>备注</td>
                                </tr>
                                <tr>
                                    <td>
                                        合计
                                    </td>
                                    <td>
                                    </td>
                                    <td></td>
                                    <td>23224</td>
                                    <td>$23224</td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    <div class="gress-details">
                        <p class="title2">订单进程</p>
                        <table class="table" border="0" cellpadding="0" cellspacing="0">
                            <thead>
                                <tr>
                                    <th width="20%">时间</th>
                                    <th width="10%">状态</th>
                                    <th width="50%">进度</th>
                                    <th width="20%">操作人</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>2019-12-12 12:12:12</td>
                                    <td>等待发货</td>
                                    <td>进度</td>
                                    <td>用户</td>
                                </tr>
                                <tr>
                                    <td>2019-12-12 12:12:12</td>
                                    <td>等待发货</td>
                                    <td>进度</td>
                                    <td>用户</td>
                                </tr>
                                <tr>
                                    <td>2019-12-12 12:12:12</td>
                                    <td>等待发货</td>
                                    <td>进度</td>
                                    <td>用户</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <div class="fr">
                    <div class="address">
                        <div class="title2">配送地址 <span class="edit-address">修改</span></div>
                        <p><span>姓名</span><span>fsgdddf</span></p>
                        <p><span>地址</span><span>石家庄</span></p>
                        <p><span>邮政编码</span><span>99999999</span></p>
                        <p><span>手机</span><span>13727878738</span></p>
                    </div>
                    <div class="peisong">
                        <div class="title2">配送信息 <span class="edit-info">修改</span></div>
                        <p><span>配送方式</span><span>EMS</span></p>
                        <p><span>重量</span><span>6.00KG</span></p>
                        <p><span>运费</span><span>$323.00</span></p>
                        <p><span>保险费</span><span>$0.99</span></p>
                    </div>
                    <div class="remarks">
                        <div class="title2">备注 <span>此备注仅提供后台管理员查看</span></div>
                        <ul>
                            <li>
                                <p><span></span>管理员（18332773847）</p>
                                <p>2019-12-12 12:12</p>
                                <div class="clear"></div>
                                <p class="text">我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注</p>
                            </li>
                            <li>
                                <p><span></span>管理员（18332773847）</p>
                                <p>2019-12-12 12:12</p>
                                <div class="clear"></div>
                                <p class="text">我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注我是备注</p>
                            </li>
                        </ul>
                        <textarea class="textarea"></textarea>
                        <p class="btn-right"><button class="btn-blue">发送</button></p>
                    </div>
                </div>
            </div>

            <!-- 修改状态弹窗 start -->
            <div class="dialog order-status-dialog">
                <div class="content">
                    <p class="title">修改状态</p>
                    <span class="close"></span>
                    <p class="select">
                        <span>订单状态&nbsp;</span>
                        <select>
                            <option>等待支付</option>
                            <option>等待支付</option>
                            <option>等待支付</option>
                        </select>
                    </p>
                    <div class="shouhou show">
                        <p class="titles"><span>*</span>售后理由：</p>
                        <ul class="list">
                            <li>
                                <div class="radiobox">
                                    <input type="radio" />
                                    <span></span>
                                </div>
                                到达时货物损坏
                            </li>
                            <li>
                                <div class="radiobox checked">
                                    <input type="radio" />
                                    <span></span>
                                </div>
                                订单错误
                            </li>
                            <li>
                                <div class="radiobox">
                                    <input type="radio" />
                                    <span></span>
                                </div>
                                收到了不相符的货物
                            </li>
                            <li>
                                <div class="radiobox">
                                    <input type="radio" />
                                    <span></span>
                                </div>
                                货物有问题
                            </li>
                            <li>
                                <div class="radiobox">
                                    <input type="radio" />
                                    <span></span>
                                </div>
                                其他，请提供详细信息
                            </li>
                        </ul>
                        <textarea class="info"></textarea>
                    </div>
                    <div class="btn-tab">
                        <button class="btn-blue ok">修改状态</button>
                        <button class="btn cancle">取消</button>
                    </div>
                </div>
            </div>
            <!-- 修改状态弹窗 end -->

            <!-- 修改订单价格弹窗 start -->
            <div class="dialog edit-price-dialog">
                <div class="content">
                    <p class="title">修改订单价格</p>
                    <span class="close"></span>
                    <div class="info">
                        <div class="item item1">
                            <span>订单总额：</span>
                            <span>$193.71</span>
                        </div>
                        <div class="item">
                            <span>产品总价</span>
                            <span>$180.00</span>
                        </div>
                        <div class="item">
                            <span>运费</span>
                            <div>
                                <span>$</span>
                                <input type="text" />
                            </div>
                        </div>
                        <div class="item">
                            <span>保险费</span>
                            <div>
                                <span>$</span>
                                <input type="text" />
                            </div>
                        </div>
                        <div class="item">
                            <span>折扣</span>
                            <div>
                                <span>$</span>
                                <input type="text" />
                            </div>
                        </div>
                        <div class="item">
                            <span>会员折扣</span>
                            <div>
                                <input type="text" />
                                <span>%</span>
                            </div>
                        </div>
                        <div class="item">
                            <span>手续费：</span>
                            <div>
                                <input type="text" />
                                <span>%</span>
                            </div>
                        </div>
                        <div class="item">
                            <span>附加费用：</span>
                            <div>
                                <span>$</span>
                                <input type="text" />
                            </div>
                        </div>
                    </div>

                    <div class="btn-tab">
                        <button class="btn-blue ok">提交</button>
                        <button class="btn cancle">取消</button>
                    </div>
                </div>
            </div>
            <!-- 修改订单价格弹窗 end -->

            <!-- 修改配送地址弹窗 start -->
            <div class="dialog edit-address-dialog">
                <div class="content">
                    <p class="title">修改配送地址</p>
                    <span class="close"></span>
                    <div class="box">
                        <div class="item item1">
                            <span>姓名:</span>
                            <input type="text" />
                            <input type="text" />
                        </div>
                        <div class="item item2">
                            <span>地址1:</span>
                            <input type="text" />
                        </div>
                        <div class="item item2">
                            <span>地址2:</span>
                            <input type="text" />
                        </div>
                        <div class="item item3">
                            <span>城市:</span>
                            <input type="text" />
                            <div>国家/地区:</div>
                            <select>
                                <option>国家</option>
                                <option>地区</option>
                                <option>国家</option>
                            </select>
                        </div>
                        <div class="item item3">
                            <span>州/省/地区:</span>
                            <select>
                                <option>州</option>
                                <option>省</option>
                                <option>地区</option>
                            </select>
                            <div>邮政编码:</div>
                            <input type="text" />
                        </div>
                        <div class="item item2">
                            <span>电话号码:</span>
                            <input type="text" />
                        </div>
                    </div>
                    <div class="btn-tab">
                        <button class="btn-blue ok">提交</button>
                        <button class="btn cancle">取消</button>
                    </div>
                </div>
            </div>
            <!-- 修改配送地址弹窗 end -->

            <!-- 修改配送信息弹窗 start -->
            <div class="dialog edit-info-dialog">
                <div class="content">
                    <p class="title">修改配送信息</p>
                    <span class="close"></span>
                    <div class="box">
                        <p class="style">
                            <span>配送方式</span>
                            <select>
                                <option>1</option>
                                <option>2</option>
                                <option>3</option>
                            </select>
                        </p>
                        <div class="checkbox-div">
                            <div class="select">
                                <div class="checkbox">
                                    <input type="checkbox" />
                                    <span></span>
                                </div>
                                <span>购买保险$0.99</span>
                            </div>
                            <div class="select">
                                <div class="checkbox">
                                    <input type="checkbox" />
                                    <span></span>
                                </div>
                                <span>购买保险$0.99</span>
                            </div>
                        </div>
                    </div>
                    <div class="btn-tab">
                        <button class="btn-blue ok">保存</button>
                        <button class="btn cancle">取消</button>
                    </div>
                </div>
            </div>
            <!-- 修改配送信息弹窗 end -->

        </div>
    </div>
    <script src="js/echarts.min.js"></script>
    <script src="js/common.js"></script>
    <script>
        $(".change-status").click(function () {
            $(".order-status-dialog").addClass("show");
        })

        $(".order-status-dialog .ok").click(function () {
            $(".order-status-dialog").removeClass("show");
        })

        $(".order-status-dialog input[type='radio']").click(function () {
            if ($(this).prop("checked")) {
                $(this).parent(".radiobox").addClass("checked").parent("li").siblings("li").find(".radiobox").removeClass("checked");
            }
        })

        $(".edit-price").click(function () {
            $(".edit-price-dialog").addClass("show");
        })

        $(".edit-price-dialog .ok").click(function () {
            $(".edit-price-dialog").removeClass("show");
        })

        $(".edit-address").click(function () {
            $(".edit-address-dialog").addClass("show");
        })

        $(".edit-address-dialog .ok").click(function () {
            $(".edit-address-dialog").removeClass("show");
        })

        $(".edit-info").click(function () {
            $(".edit-info-dialog").addClass("show");
        })

        $(".edit-info-dialog .ok").click(function () {
            $(".edit-info-dialog").removeClass("show");
        })

        $(".checkbox-div input[type='checkbox']").click(function () {
            if ($(this).prop("checked")) {
                $(this).parent(".checkbox").addClass("checked");
            } else {
                $(this).parent(".checkbox").removeClass("checked");
            }
        })
    </script>
</body>

</html>